<template>
    <div class="emailmo">
        <memberCentreNav></memberCentreNav>
        <div class="writing_right">
            <div class="TitleList">
                <div class="TitleList_padding">
                    <div class="TitleList_top">
                        <div class="TitleList_top_title"><span></span>邮箱修改</div>
                        
                    </div>
                </div>

                <div class="emailmo_step">
                            <div class="emailmo_step_list on">
                                <div class="step_list_icon">1</div>
                                <div class="step_list_title">验证身份</div>
                            </div>
                            <span></span>
                            <div class="emailmo_step_list">
                                <div class="step_list_icon">2</div>
                                <div class="step_list_title">修改安全邮箱</div>
                            </div>
                            <span></span>
                            <div class="emailmo_step_list">
                                <div class="step_list_icon">3</div>
                                <div class="step_list_title">完成</div>
                            </div>
                        </div>

                <div class="emailmo_content">
                    <div class="emailmo_content_list">
                        <div class="content_list_left">邮箱</div>
                        <div class="content_list_right">{{$store.getters.memberInfo.email}}<input type="hidden" v-model="phone" ref="phoneInput" /></div>
                    </div>
                    <div class="emailmo_content_list sendCode">
                        <div class="content_list_left">验证码</div>
                        <div class="content_list_right">
                            <input type="text" v-model="code" placeholder="请输入验证码" />
                            <button @click="sendCode" :disabled="counting">{{ counting ? `${countDown}秒后重试` : '获取验证码' }}</button>
                        </div>
                    </div>
                    <div class="emailmo_content_submit" @click="login" :disabled="!phone || !code">下一步</div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import memberCentreNav from "@c/common/memberCentreNav/memberCentreNav";

    export default {
        name: "emailFirstStep",
        data() {
            return {
                phone: this.$store.getters.memberInfo.email,
                code: '',
                countDown: 60,
                counting: false,
            };
        },
        components: {
            memberCentreNav
        },
        methods:{
          sendCode() {
            // 判断手机号码是否为空
            if (!this.phone) {
              this.$refs.phoneInput.focus();
              this.$message({
                message: '请输入邮箱!',
                type: 'warning'
              });
              return;
            }

            this.axios.get('/api/common/sendVerifyCode', {params: {
                to : this.phone,
                type: 2,
              }}).then(res=>{
              // 启动倒计时
              this.counting = true;
              let interval = setInterval(() => {
                if (this.countDown > 0) {
                  this.countDown--;
                } else {
                  this.counting = false;
                  this.countDown = 60;
                  clearInterval(interval);
                }
              }, 1000);
            })



          },
            login() {
                let that = this;
                that.axios.post('/api/member/checkEmailStep1',{
                  phone: that.phone,
                  code: that.code
                }).then(res => {
                  if(res.code === 1) {
                    window.location.href = '/#/memberCentre/basicInformation/emailStepTwo';
                  }
                })


            },
        },
        mounted() {

        },
    }
</script>

<style>
  @import "emailFirstStep.css";
</style>
